<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"> <!-- 指定文档的字符编码为 UTF-8 -->
		<title></title> <!-- 页面的标题，此处为空 -->
	</head>
	<body>
		<div id="app"> <!-- 应用程序的根容器，具有唯一的 ID "app" -->
			<input type="text" name="" id="" value="" v-model="wether" />
			<!-- 输入框，使用 Vue 的 v-model 指令双向绑定数据 "wether" -->
			<my-component :message="wether" img-src="../img/1.jpg">
				<!-- 自定义组件 "my-component"，传递属性 "message" 和 "img-src" -->
			</my-component>
		</div>
		<template id="temp"> <!-- 模板，具有唯一的 ID "temp" -->
			<div>
				<h3>{{message}}</h3> <!-- 显示传递进来的属性 "message" 的值 -->
				<img :src='ImgSrc' /> <!-- 图片元素，使用动态绑定的属性 "ImgSrc" 作为图片的源地址 -->
			</div>
		</template>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script> <!-- 引入 Vue.js 库 -->
		<script>
			Vue.component('my-component', { // 注册自定义组件 "my-component"
				props: ["message", "ImgSrc"], // 定义组件接收的属性 "message" 和 "ImgSrc"
				template: "#temp" // 指定组件使用的模板为具有 ID "temp" 的模板
			});
			var app = new Vue({ // 创建一个新的 Vue 实例
				el: '#app', // 将实例挂载到具有 ID "app" 的元素上
				data: { // 定义实例的数据
					wether: '今天天气很好' // 初始化数据 "wether" 的值
				}
			});
		</script>
	</body>
</html>